<template>
	<div class="right-box">
		<Breadcrumb>
	        <BreadcrumbItem>
	            <Icon type="ios-stats" color="red" size="18"></Icon> 报表管理
	        </BreadcrumbItem>
	        <BreadcrumbItem>
	           入库报表
	        </BreadcrumbItem>
	    </Breadcrumb>
	    <div class="report-box">
	   		<div id="canvas" :style="{width: '100%', height: '100%'}"></div>
	    </div>
	</div>
</template>

<script>
	export default{
		name:'storageReport',
		data(){
			return{
				myChart:'',
				legendData: [],
				options: {
					grid: {
						height: 150,
						top: 0
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c}"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						top: 'center',
						data: this.legendData
					},
					series: [{
						name: '订单量',
						type: 'pie',
						radius: '55%',
						center: ['50%', '50%'],
						data: [{
								value: 1959,
								name: '本月:1959',
								itemStyle: {
									normal: {
										color: '#F1C0B1'
									}
								}
							},
							{
								value: 1239,
								name: '今年:1239',
								itemStyle: {
									normal: {
										color: '#BAD7CB'
									}
								}
							}
						],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				}
			}
		},
		methods:{
			getOutReport(mon,all){
				this.legendData = [mon,all]
				this.options.series[0].data[0].value = mon
				this.options.series[0].data[0].name = "本月" + mon
				this.options.series[0].data[1].value = all
				this.options.series[0].data[1].name = "今年" + all
				this.myChart.setOption(this.options)
			},
			getData(){
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/getOutWarehouseHistoryReport',
	    			data:{
	    				departmentName:that.search
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				//月份
	    				let d = new Date().getMonth()+1
	    				let thisMonthData = 0
	    				let a = 0
	    				for(let key in res.data.outWarehouseHistoryList){
	    					a+=res.data.outWarehouseHistoryList[key]
	    					if(key==d){
	    						thisMonthData = res.data.outWarehouseHistoryList[key]
	    					}
	    				}
	    				this.getOutReport(thisMonthData,a)
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			}
		},
		mounted(){
			this.getData()
			this.myChart = this.$echarts.init(document.getElementById('canvas'))
			window.onresize = this.myChart.resize()
			this.getOutReport()
		}
	}
</script>

<style>
.right-box{
	width: 100%;
	height: 100%;
	position: relative;
}
.report-box{
	width: 100%;
	height: 500px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
</style>